<template>
	<view>
		<nav-bar title="编辑地址"></nav-bar>
		<view class="form-content">
			<view class="form-items row-between">
				<view class="label">
					收货人
				</view>
				<input type="text" style="text-align: right;" placeholder="请输入收货人姓名" v-model="receiverName" />
			</view>
			<view class="form-items row-between">
				<view class="label">
					手机号码
				</view>
				<input type="number" style="text-align: right;" placeholder="请输入手机号" v-model="phoneNumber" />
			</view>
			<view class="form-items row-between" @click="toMap">
				<view class="label">
					所在地区
				</view>
				<view class="row-center">
					<view style="text-align: right;margin-right: 10upx;">{{ addressInfo.region || '' }}</view>
					<image class="area-icon" :src="baseIconUrl + 'icon_location.png'" mode="scaleToFill" />
				</view>
			</view>
			<view class="form-items row-between">
				<view class="label">
					详细地址
				</view>
				<input type="text" style="text-align: right;" v-model="addressInfo.details" />
			</view>
			<view class="form-items row-between">
				<view class="label">
					设为默认地址
				</view>
				<u-switch v-model="isdefault" activeColor="#0b3f35"></u-switch>
			</view>
		</view>
		<view class="form_bottom_btn" style="background-color: #f2f2f2 !important;">
			<view class="btn-box">
				<view class="confirm" @click="clickAddAddress">保存收货地址</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseImgUrl,
		baseIconUrl
	} from '@/config'
	import {
		ADDRESS_FORM
	} from './storeConfig/addressConfig'
	export default {
		name: 'EditAddress',
		data() {
			return {
				id: '',
				receiverName: '',
				phoneNumber: '',
				remark: '',
				baseImgUrl,
				baseIconUrl,
				full_address: '',
				address: '',
				isdefault: false,
				addressConfig: [],
				addressForm: {},
				addressInfo: {},
				rules: {

				},

				isDefault: 1
			}
		},
		onLoad(options) {
			console.log(JSON.parse(options.item));
			if (options.item) {
				const {
					latitude,
					longitude,
					phoneNumber,
					receiverName,
					details,
					region,
					id,
					isDefault
				} = JSON.parse(options.item)
				this.addressInfo.latitude = latitude
				this.addressInfo.longitude = longitude
				this.addressInfo.details = details
				this.addressInfo.region = region
				this.phoneNumber = phoneNumber
				this.receiverName = receiverName
				this.id = id
				this.isDefault = isDefault
				this.isdefault = isDefault == 0 ? true : false
			}
			this.addressConfig = uni.$u.deepClone(ADDRESS_FORM)
		},
		onReady() {

		},
		watch: {
			isdefault: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.isDefault = 0
					} else {
						this.isDefault = 1
					}
				},
				deep: true,
			}
		},
		methods: {
			toMap() {
				uni.chooseLocation({
					success: res => {
						if (res.name && res.address && res.latitude && res.longitude) {
							this.addressInfo = {
								...res,
								region:res.name,
								address:res.name+this.addressInfo.details
								
							}
							this.addressInfo.details = ''
						}
					}
				})
			},
			async clickAddAddress() {
				const data = {
					receiverName: this.receiverName || '',
					isDefault: this.isDefault,
					remark: this.remark || '',
					phoneNumber: this.phoneNumber || '',
					...this.addressInfo,
					address:this.addressInfo.region + this.addressInfo.details,
				}
				const subData = {
					id: this.id,
					receiverName: this.receiverName || '',
					isDefault: this.isDefault,
					remark: this.remark || '',
					phoneNumber: this.phoneNumber || '',
					...this.addressInfo,
					address:this.addressInfo.region + this.addressInfo.details,
				}
				if (this.receiverName == '') {
					uni.showToast({
						icon: 'none',
						title: '收货人姓名不能为空'
					})
					return
				} else if (this.phoneNumber == '') {
					uni.showToast({
						icon: 'none',
						title: '手机号码不能为空'
					})
					return
				} else if (this.addressInfo.details == '') {
					uni.showToast({
						icon: 'none',
						title: '详细地址不能为空'
					})
					return
				} else {
					if (this.id && this.id !== '') {
						const res = await this.$PUT('/fx/address', subData)
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: '修改成功',
								duration: 2000
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/subPages/store/myAddress'
								})
							}, 2000)
						}
					} else {
						const res = await this.$POST('/fx/address', data)
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: '新增成功',
								duration: 2000
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/subPages/store/myAddress'
								})
							}, 2000)
						}
					}
				}
			},

		}
	}
</script>
<style lang="scss" scoped>
	.area-icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}

	.form-content {
		width: 100%;
		padding: 20upx;

		.form-items {
			width: 100%;
			height: 120upx;
			border-bottom: 1upx solid #ced9d7;
		}
	}

	.label {
		width: 200upx;
		font-size: 30upx;
		font-weight: 600;
	}
</style>